<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File upload</title>
    <style>
        body {
            background-image: url("img/Background_picture.jpeg");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            text-align:center;
        }
        #div1{
            width: 600px;
            height: 300px;
            margin: 10% auto auto auto;
            background-color: white;
            border: 5px #bfbfbf solid;
            opacity:90%;
        }

        table{
            width: 100%;
            padding-top: 15%;
        }
        tr{
            text-align:center;
        }
        td{

            height: 70px;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/spark-md5.js"></script>
</head>


<body>
<div id="div1">
    <form id="from" method="get" action="/upload">
        <table>
            <tr>
                <a id="a" style="color: red"></a>
            </tr>
            <tr>
                <td>
                    <input id="md5" name="md5" type="text" style="width: 250px" oninput="aa(event)" onporpertychange="aa(event)">
                    <input id="button" type="submit" value="下载">
                </td>
            </tr>
        </table>
    </form>
</div>

<script type="text/JavaScript">
    function aa(e){
        var m = $("#md5").val();
        if (m.length==32){
            alert(m);
            $.ajax({
                type:"GET",//请求方式为get或者post
                url:"/md5Check",//请求的url(一般为后台接口)
                data:{"md5":m},//发送到服务器的参数
                dataType:"json",//服务器响应的数据类型
                success:function(data) { //请求成功后返回的数据，赋值给变量'data'
                    //对data进行操作 
                    if (!data.msg){
                        $("#a").html("文件不存在");
                        $('#button').prop("type","button");
                    }else {
                        $('#button').prop("type","submit");
                    }
                },
                error: function(){
                    $("#a").html("文件不存在");
                    $('#button').prop("type","button");
                }
            });
        }

    }
</script>
</body>
</html>
